<template>
  <div class="trainDetails">
    <div class="container">
      <div class="train-detalis-left">
        <div>
          <span>{{ itemInfo.itemSchedule }} %</span>
          <span>完成进度</span>
        </div>
        <div
          style="
            margin-top: 40px;
            width: 100%;
            margin-left: 10px;
            margin-right: 10px;
            text-indent: 20px;
          "
        >
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="一致性 Consistency" name="1">
              <div style="margin-left: 15px; margin-right: 15px">
                与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
              </div>
              <div style="margin-left: 15px; margin-right: 15px">
                在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
              </div>
            </el-collapse-item>
            <el-collapse-item title="反馈 Feedback" name="2">
              <div style="margin-left: 15px; margin-right: 15px">
                控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
              </div>
              <div style="margin-left: 15px; margin-right: 15px">
                页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
              </div>
            </el-collapse-item>
            <el-collapse-item title="效率 Efficiency" name="3">
              <div style="margin-left: 15px; margin-right: 15px">
                简化流程：设计简洁直观的操作流程；
              </div>
              <div style="margin-left: 15px; margin-right: 15px">
                清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
              </div>
              <div style="margin-left: 15px; margin-right: 15px">
                帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
              </div>
            </el-collapse-item>
            <el-collapse-item title="可控 Controllability" name="4">
              <div style="margin-left: 15px; margin-right: 15px">
                用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
              </div>
              <div style="margin-left: 15px; margin-right: 15px">
                结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="train-detalis-right" >
        <div class="right-item-top">课程目录</div>

        <div
          class="right-item"
          v-for="(item, index) in this.pageInfo.dataShow"
          :key="index"
        >
          <el-progress
            type="circle"
            :width="75"
            :percentage="item.catalogSchedule"
            stroke-width="9"
          ></el-progress>
          <div class="item-info">
            <div style="font-size: 16px; font-weight: 30px; color:rgb(64, 158, 255);">
              {{ item.catalog }}
            </div>
            <div style="font-size: 10px;color:rgb(153, 153, 153);">
              时长: {{ Math.floor(item.catalogHour / 60000) }} 分
              {{ Math.floor((item.catalogHour / 1000) % 60) }} 秒
            </div>
          </div>

          <el-button style="height: 40px" type="primary" @click="handleClick2(item.catalog)"
            >我要学习</el-button
          >
        </div>

        <div class="item-right-footer">
          <el-button size="mini" @click="prePage()" type="primary"
            >上一页</el-button
          >
          <span style="color:rgb(153, 153, 153);">
            第{{ this.pageInfo.currentPage + 1 }}页 / 共{{
              this.pageInfo.pageNum
            }}页
          </span>
          <el-button size="mini" @click="nextPage()" type="primary"
            >下一页</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findScheduleAndHour } from "@/api/item";

export default {
  data() {
    return {
      /* loading加载 */
        loading:this.$loading({
            lock: true,
            text: "数据加载中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
      }),
      activeNames: ["1"],
      //从上一个页面传来的两个id
      itemIdAnduserId: {
        userId: "",
        itemId: "",
      },
      itemInfo: {
        itemSchedule: "",
        catalogList: [],
      },
      pageInfo: {
        // 假设这是后台传来的数据来源
        data: [],
        // 所有页面的数据
        totalPage: [],
        // 每页显示数量
        pageSize: 4,
        // 共几页
        pageNum: 1,
        // 当前显示的数据
        dataShow: [],
        // 默认当前显示第一页
        currentPage: 0,
      },
    };
  },
  created() {
    //接受上一个页面传进来的值
    // if (
    //   this.$route.params.userId !== undefined &&
    //   this.$route.params.itemId !== undefined
    // ) {
    //   console.log(this.$route.params.userId);
      this.itemIdAnduserId.userId = this.$route.query.userId;
      this.itemIdAnduserId.itemId = this.$route.query.itemId;
    // }
    this.getData();
  },
  methods: {
    //进入页面就初始化的页面信息(培训进度以及目录信息)
    getData() {
      console.log(this.$route.params.userId);
      console.log(this.itemIdAnduserId);

      findScheduleAndHour(this.itemIdAnduserId).then((res) => {
        console.log(res);
        this.itemInfo.itemSchedule = res.data.itemSchedule;
        this.pageInfo.totalPage = res.data.catalogSchedules;
        this.pageInfo.data = res.data.catalogSchedules;
        console.log(this.pageInfo.totalPage);

        // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
        this.pageInfo.pageNum =
          Math.ceil(this.pageInfo.totalPage.length / this.pageInfo.pageSize) ||
          1;
        console.log(this.pageInfo.pageNum);
        for (let i = 0; i < this.pageInfo.pageNum; i++) {
          // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
          // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为4， 则第一页是1-4条，即slice(0,4)，第二页是5-8条，即slice(5,8)...

          this.pageInfo.totalPage[i] = this.pageInfo.data.slice(
            this.pageInfo.pageSize * i,
            this.pageInfo.pageSize * (i + 1)
          );
          console.log(this.pageInfo.totalPage[i]);
        }
        // 获取到数据后显示第一页内容
        this.pageInfo.dataShow =
          this.pageInfo.totalPage[this.pageInfo.currentPage];
        this.loading.close()
      });
    },

    // 下一页
    nextPage() {
      if (this.pageInfo.currentPage === this.pageInfo.pageNum - 1) return;
      this.pageInfo.dataShow =
        this.pageInfo.totalPage[++this.pageInfo.currentPage];
    },
    // 上一页
    prePage() {
      if (this.pageInfo.currentPage === 0) return;
      this.pageInfo.dataShow =
        this.pageInfo.totalPage[--this.pageInfo.currentPage];
    },

    handleChange(val) {
      console.log(val);
    },
    handleClick2(catalog) {
      this.$router.push({
        name: "trainDetails2",
        query: {
          userId: this.itemIdAnduserId.userId,
          itemId: this.itemIdAnduserId.itemId,
          catalog: catalog
        },
      });
    },
  },
};
</script>

<style scoped>
.trainDetails {
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  width: 80%;
  height: 90%;
  display: flex;
}
.train-detalis-left {
  height: 100%;
  /* background-color: rgb(240, 242, 245); */
  width: 300px;
  margin-right: 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.train-detalis-left > div:first-child {
  width: 100%;
  height: 150px;
  font-size: 36px;
  color: #fff;
  position: relative;
  background-image: url(../../img/进度背景.jpg);
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
}
.train-detalis-left > div:first-child > span:last-child {
  font-size: 16px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.train-detalis-right {
  position: relative;
  height: 100%;
  /* background-color: red; */
  flex: 1;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.train-detalis-right .right-item-top {
  font-weight: 700;
  font-size: 15px;
  color: rgb(64, 158, 255);
  height: 30px;
}
.train-detalis-right .right-item {
  display: flex;
  padding: 10px;
  align-items: center;
  /* background-color: rgb(240, 242, 245); */
  border-top: 1px dashed #ccc;
  height: 130px !important;
}
.train-detalis-right .right-item .el-button {
  margin-left: auto !important;
}
.train-detalis-right .right-item .item-info {
  margin-left: 20px;
}
.train-detalis-right .right-item .item-info > div:first-child {
  margin-bottom: 20px;
}
.item-right-footer {
  position: absolute;
  bottom: 30;
  left: 50%;
  transform: translateX(-50%);
}
</style>